<template>
  <div id="app">
    <div class="tabbar">
      <div class="title">
        <span class="span"><i class="el-icon-loading"></i></span>
        <span class="h3">欢迎{{ user }} </span>
      </div>

      <!-- 导航栏： -->
      <div class="tabbarlist">
        <el-menu
          :default-active="activeIndex"
          class="ul"
          mode="horizontal"
          @select="handleSelect"
          active-text-color="#fff"
        >
          <el-menu-item class="li" index="1">
            <img
              id="tabbar1"
              src="http://localhost:3002/upload/titleHome.png"
              alt=""
            />
            <div>报名首页</div>
          </el-menu-item>

          <el-menu-item class="li" index="2">
            <img
              id="tabbar1"
              src="http://localhost:3002/upload/title2.png"
              alt=""
            />
            <div>团队信息</div>
          </el-menu-item>

          <el-menu-item class="li" index="3">
            <img
              id="tabbar1"
              src="http://localhost:3002/upload/title3.png"
              alt=""
            />
            <div>人员管理</div>
          </el-menu-item>

          <el-menu-item class="li" index="4">
            <img
              id="tabbar1"
              src="http://localhost:3002/upload/title4.png"
              alt=""
            />
            <div>单练报名</div>
          </el-menu-item>
        </el-menu>
      </div>
    </div>

    <!-- 圆形切换区域： -->
    <div class="tb1" v-show="tb1">
      <div class="main-box">
        <h2>服务内容</h2>
        <el-button type="primary" @click="goToTb2" class="el-button">
          <i class="el-icon-office-building el-icon-notebook"></i>
          <div>团队</div>
        </el-button>

        <el-button type="primary" @click="totb3">
          <i class="el-icon-collection el-icon-notebook"></i>
          <div>人员</div>
        </el-button>

        <el-button type="primary" @click="totb4">
          <i class="el-icon-trophy el-icon-notebook"></i>
          <div>单练</div>
        </el-button>
      </div>
    </div>

    <!--团队信息：  -->
    <div class="tb2" v-show="tb2"><Group @custom-event="gotb3" /></div>

    <!-- 人员管理： -->
    <div class="tb3" v-show="tb3">
      <Staff @gototb4="gotb4" />
    </div>

    <!-- 单练报名 -->
    <div class="tb4" v-show="tb4">
      <Single />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Staff from "../../components/Staff.vue";
import Project from "../../components/Project.vue";
import Group from "../../components/Group.vue";
import Single from "../../components/Single.vue";
import { mapActions, mapState } from "vuex";

export default {
  components: { Staff, Project, Group, Single },
  data: function () {
    return {
      activeIndex: "1",
      tb1: 1,
      tb2: 0,
      tb3: 0,
      tb4: 0,
      user: "", // 赛事标题
    };
  },
  methods: {
    ...mapActions(["fetchPeople"]),
    gotb3() {
      this.activeIndex = "3";
      this.handleSelect("3");
    },
    gotb4() {
      this.activeIndex = "4";
      this.handleSelect("4");
    },
    goproject() {
      this.openPopupCentered("http://localhost:8081/project", 900, 300);
    },

    goToTb2() {
      this.tb2 = 1;
      this.tb1 = 0;
      this.activeIndex = "2";
    },

    totb3() {
      this.tb3 = 1;
      this.tb1 = 0;
      this.activeIndex = "3";
    },
    totb4() {
      this.tb4 = 1;
      this.tb1 = 0;
      this.activeIndex = "4";
    },

    getTabbar() {
      axios({
        url: "http://localhost:3002/competition/home/list",
        method: "post",
        data: {},
      }).then((res) => {
        this.tabbarList = res.data.list;
      });
    },

    // tb栏切换
    handleSelect(key, keyPath) {
      this.activeIndex = key;
      // console.log(this.activeIndex, keyPath);
      if (key == 1) {
        this.tb1 = 1;
      } else {
        this.tb1 = 0;
      }
      if (key == 2) {
        this.tb2 = 1;
      } else {
        this.tb2 = 0;
      }
      if (key == 3) {
        this.tb3 = 1;
      } else {
        this.tb3 = 0;
      }
      if (key == 4) {
        this.tb4 = 1;
      } else {
        this.tb4 = 0;
      }
    },

    openPopupCentered(url, width, height) {
      // 获取屏幕宽度和高度
      var screenWidth = window.screen.width;
      var screenHeight = window.screen.height;

      // 计算窗口的left和top值，使得新窗口居中
      var left = Math.round((screenWidth - width) / 2);
      var top = Math.round((screenHeight - height) / 2);

      // 调用window.open，并设置窗口特性，包括left和top
      var windowFeatures = `width=${width},height=${height},left=${left},top=${top},location=yes,menubar=no,toolbar=no,status=no`;
      window.open(url, "_blank", windowFeatures);
    },
  },

  mounted() {
    this.getTabbar();
    // 获取赛事标题：
    const dataString = localStorage.getItem("userInfo");
    if (dataString) {
      const data = JSON.parse(dataString);
      this.user = data.username;
    }
  },
};
</script>

<style lang="less" scoped>
#app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.tb1 {
  .main-box {
    background-color: rgba(239, 237, 237, 0.8);
    padding: 20px;
    border-radius: 8px;
    width: 820px;
    text-align: center;
    margin: 0 auto;
    margin-top: 80px;
    .el-button {
      margin-block: 20px;
      margin: 20px 80px;

      width: 90px;
      border: 1px solid #ff7c31;
      border-radius: 50%;
      .el-icon-notebook {
        margin-bottom: 10px;
        font-size: 30px;
      }
    }
    .el-button--primary {
      color: #ff7c31;
      background-color: #fff;
    }
    .el-button:hover {
      background-color: rgb(174, 174, 170);
      color: #fff;
    }
  }
}

// .tbones {
//   .tb1 {
//     .tbone {
//       // transform: translateY(50%);
//     }

//     //单项报名
//     .tboneTB4 {
//       // background: rgb(206, 155, 117);
//       transform: translateY(90%);
//     }
//     // 对抗展示
//     .tboneTB8 {
//       // background: rgb(209, 171, 171);
//       transform: translateY(30%);
//     }
//   }
// }

// .tbone {
//   width: 260px;
//   height: 260px;
//   border-radius: 100%;
//   background-color: #1d69a089;
//   border: 1px solid #1d6aa0;
//   margin-right: 20px;
//   cursor: pointer;
// }

// .tb1img {
//   width: 150px;
//   height: 150px;
//   margin-top: 30px;
// }

// .tb3 {
// transform: translateY(10%);
// height: 880px !important;
// width: 1000px;
// }

.tb4 {
  // transform-origin: top left; /* 设置缩放的原点 */
  transform: scale(0.8);
}
.tb2 {
  // margin: 0 auto;
  // background-color: rgb(160, 128, 128);
  // width: 100%;
  // height: 88%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

// /* 切换区域：最大的盒子 */
// .tbones,
// .tb3,
// .tb4 {
// overflow: hidden;
// background-color: rgb(142, 143, 148);
// width: 1920px;
// height: 832px;
// margin: 0 auto;
// position: relative; /* 确保绝对定位的子元素相对于这个父元素定位 */
// box-sizing: border-box; /* 确保padding和border不会增加元素的总宽度和高度 */
// }
// /* 原形：白色背景区域 */

.tb3 {
  // transform: translateX(40%) !important;
  // background-color: #7c7e7c !important;

  // transform: scale(0.7) !important;
}

.tabbar {
  /* margin-top: 10px; */
  background: linear-gradient(#7c7e7c, rgb(42, 42, 42));
  color: #6e7b82;
  display: flex;
  // justify-content: flex-start;
  // padding: 5px 30px;
  height: 80px;
  // width: 96.1%;
  // width: 100%;
  padding: 0 50px;
  transform: translateY(-10%);
  /* transform: translateX(0.5%); */
  // transform-origin: top left; /* 设置缩放的原点 */
  // transform: scale(0.96);
}

.tabbar .title {
  /* background-color: #fff; */
  padding-top: 13px;
  width: 20%;
  transform: translateY(10px);

  // background-color: rgb(21, 86, 104);
  // background-image: url("http://localhost:3002/upload/indexBGM.png");
  // background-size: cover;
  // background-position: center;
}

.tabbar .title .h3,
.tabbar .title .span {
  display: inline-block;
  // color: #5977ed;
  color: #fff;
}

.tabbar .title .h3 {
  letter-spacing: 2px;
  font-size: 20px;
  font-weight: bold;
  /* vertical-align: text-top; */
}

.tabbar .title .span {
  /* transform: translateX(2%); */
  margin-right: 20px;
}

.tabbarlist {
  width: 60%;
  /* background-color: #ccc; */
  display: flex;
  flex-direction: row;
  text-align: center;
  height: 100%;
  // padding-top: 2px;
}

.tabbarlist .ul {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  // height: 100%;
  // transform: translateY(-22%);
}

.tabbarlist .ul .li {
  list-style-type: none;
  /* background-color: #0B2F50; */
  flex: 1;
  cursor: pointer;
  // padding: 0 10px;
  background: linear-gradient(#7c7e7c, rgb(42, 42, 42));
  box-sizing: border-box;
}
.li {
  height: 80px !important;
}

.tabbarlist .ul .li div {
  // margin-top: 5px;
  height: 20px;
  transform: translateY(-110%);

  font-size: 16px;
}

/* .tabbarlist .ul .li:hover {
  background-color: #0b2f50;
  background-color: #fff;
  color: white;
} */

.tabbarlist .ul .li img {
  width: 40px;
  height: 40px;
}
</style>
